<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>电子签名</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #f2f2f2;
        }
        .main{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #signature{
            width: 100%;
            height: 100%;
            background-color: #fff;
            overflow: hidden;
        }
        .header{
            width: 50px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 16px;
            background-color: #273039;
            color: #fff;
            text-align: center;
            border: none
        }

        .footer{
            width: 50px;
            height: 100%;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            border-right: 2px solid #f2f2f2
        }
        .size{
            position: absolute;
            top: 5%;
        }
        .size div{
            margin-top: 20px;
            border: 2px solid #f2f2f2;
            border-radius: 50%;

            text-align: center;
            background: #00a0e9
        }
        .size-one{
            width: 14px;
            height: 14px;
            line-height: 14px;
            margin-left: 14px;
        }
        .size-two{
            width: 18px;
            height: 18px;
            line-height: 18px;
            margin-left: 12px;
        }
        .size-three{
            width: 22px;
            height: 22px;
            line-height: 22px;
            margin-left: 10px;
        }
        .btns{
            width: 22px;
            height: 22px;
            line-height: 22px;
            border: 2px solid #f2f2f2;
            border-radius: 50%;
            margin-left: 10px;
            text-align: center;
        }
        .btn{
            position: absolute;
            top: 75%;
        }
        .btn button{
            margin-bottom: 40px;
        }
        .btn-cx{
            width: 50px !important;
            height: 22px;
            line-height: 22px;
            border: 2px solid #f2f2f2;
            border-radius: 50%;
            margin-left: 10px;
            text-align: center;
            background-color: #fff;
            border: 1px solid #00a0e9;
            line-height: 22px;
            color: #00a0e9;
            border-radius: 5px;
            bottom: 10px;
            right: 0 !important;
            outline: none;
        }
        .btn .btn-cxx{
            background-color: #fff;
            border: 1px solid #00a0e9;
            line-height: 22px;
            color: #00a0e9;
            border-radius: 5px;
            bottom: 10px;
            right: 0 !important;
            outline: none;
        }
        .btn .btn-bc{
            background-color: #00a0e9;
            border: 1px solid #00a0e9;
            line-height: 22px;
            color: #fff;
            border-radius: 5px;
            outline: none;
        }
        .color{
            position: absolute;
            bottom: 5%;
        }
        .color div{
            margin-bottom: 20px;
        }

        .trans{
            transform:rotate(90deg);
            -ms-transform:rotate(90deg);
            -moz-transform:rotate(90deg);
            -webkit-transform:rotate(90deg);
            -o-transform:rotate(90deg);
        }
        .size-this,.color-this{
            border: 2px solid #3FDB99 !important;
        }

    </style>
</head>
<body>

<div class="main">
    <div class="content" id="signature"></div>
    <div class="footer">
        <div class="size">
            <div class="size-one size-this" data-line="2"></div>
            <div class="size-two " data-line="4"></div>
            <div class="size-three" data-line="8"></div>
        </div>
        <div class="btn">
            <button class="btn-cxx trans">清&nbsp;空</button>
            <button class="btn-bc trans">保&nbsp;存</button>
        </div>
        <div class="color" style="display: none">
            <div class="btns color-this" style="background: #273039;" data-color="#273039"></div>
        </div>
    </div>
</div>
</body>
<script src="./js/jquery-2.1.4.min.js"></script>
<script src="./js/jSignature.min.js"></script>
<script src="./js/jSignature.min.noconflict.js"></script>
<script>

    function jSignatures(color='#273039',lineWidth=3){
        $("#signature").html('')
        $("#signature").jSignature({color:color,lineWidth:lineWidth,width:'100%',height:'100%',UndoButton:false});
    }
    jSignatures();

    //清空
    $('.btn-cxx').on('click',function(){
        $("#signature").jSignature('clear');
    });

    //点击大小
    $('.size div').on('click',function(){
        $('.size-this').removeClass('size-this')
        $(this).addClass('size-this')
        var lineWidth = $(this).data('line');
        var color = $('.color-this').data('color')
        jSignatures(color,lineWidth);
    });

    //保存图片
    $('.btn-bc').on('click',function(){
        var data_arr = $("#signature").jSignature('getData','image');
        var data = 'data:'+data_arr[0]+','+data_arr[1];
        console.log(data);return;
     
    });
</script>
</html>